<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <link rel="icon" type="image/jpeg" sizes="80x80" href="logo.jpg"/>
    <title>CDN Index Page</title>
    <style type="text/css">
        .yh-content > div {
            max-height: 500px;
            overflow-y: auto;
        }
    </style>
</head>
<body>

<div id="app">

    <yanhui-header :actions="actions" title="CDN Index"></yanhui-header>

    <div class="p-3 d-md-flex justify-content-around flex-wrap yh-content">

        <div class="card h-100 my-3">
            <div class="card-header">Templates</div>
            <div class="card-body">
                <ul>
                    <li v-for="tpl in cfg.templates">
                        <a target="_blank" :href="'templates/'+tpl">{{'templates/' + tpl}}</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="card h-100 my-3">
            <div class="card-header">JSLibs</div>
            <div class="card-body">
                <ul>
                    <li v-for="jsLib in cfg.jsLibs">
                        <a target="_blank" :href="jsLib.link">{{jsLib.name}}</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="card h-100 my-3">
            <div class="card-header">Icons</div>
            <div class="card-body">
                <ul>
                    <li v-for="icon in cfg.icons">
                        <a target="_blank" :href="icon.link">{{icon.name}}</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="card h-100 my-3">
            <div class="card-header">CDN Files Tree</div>
            <div class="card-body">
                <pre v-html="fileTree"></pre>
            </div>
        </div>
    </div>

</div>

<script src="/cdn/vue/vue.min.js"></script>
<script src="/cdn/axios.min.js"></script>
<script src="/cdn/bootstrap/jquery.slim.min.js"></script>
<script src="/cdn/bootstrap/bootstrap.min.js"></script>

<script src="/js/common-min.js"></script>

<link rel="stylesheet" href="/cdn/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="/cdn/font-awesome-4.7.0/css/font-awesome.min.css"/>

<script>

    initApp().then(() => {
        new Vue({
            el: "#app",
            data() {
                return {
                    cfg: {},
                    fileTree: "",
                    actions: []
                }
            },
            methods: {
                refresh() {
                    let result = confirm("确认重新加载？");
                    if (result) {
                        this.cfg = {};
                        this.fileTree = "";
                        this.loadCfg(true);
                        this.loadFileTree(true);
                    }
                },
                loadCfg(refresh = false) {
                    common.getContent("json/cdn.cfg.json", refresh).then(cfgJson => {
                        console.log(cfgJson);
                        this.cfg = JSON.parse(cfgJson);
                    });
                },
                loadFileTree(refresh = false) {
                    common.getContent("json/cdn.fileTree.txt", refresh).then(data => {
                        this.fileTree = data;
                    });
                },
            },
            mounted() {
                this.loadCfg();
                this.loadFileTree();
            }
        })
    })

</script>

</body>
</html>
